<!-- 定制管理 -->
<template>
  <div style="padding-left:20px;">
    <el-form :inline="true" class="demo-form-inline">

      <el-form-item label="">
        <el-date-picker v-model="data.startTime" value-format="yyyy-MM-dd" type="date" size="medium" :clearable="false" :editable="false" :placeholder="$t('lan.stratTime')" style="width:100%"></el-date-picker>
      </el-form-item>
      <el-form-item label="">
        <el-date-picker v-model="data.endTime" value-format="yyyy-MM-dd" type="date" size="medium" :clearable="false" :editable="false" :placeholder="$t('lan.endTime')" style="width:100%"></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-input v-model="data.name" size="medium" class="iup_width200" :placeholder="$t('lan.name')"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="data.mobile" size="medium" class="iup_width200" :placeholder="$t('lan.phone')"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="medium" @click="search">{{$t('lan.query')}}</el-button>
        <el-button type="info" size="medium" @click="reset">{{$t('lan.reset')}}</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="customizeList" v-loading="loading" :element-loading-text="$t('lan.dataLoading')" empty-text border stripe>
      <div slot="empty">
        <div v-if="loading"></div>
        <div v-else>{{$t('lan.available')}}</div>
      </div>
      <el-table-column type="index" :label="$t('lan.num')" align="center" width="140"></el-table-column>
      <el-table-column prop="addTime" :label="$t('lan.submitTime')" :formatter="common.formatTime" align="center" width="170"></el-table-column>
      <el-table-column prop="name" :label="$t('lan.name')" align="center" width="120"></el-table-column>
      <el-table-column prop="mobile" :label="$t('lan.phone')" align="center" width="140"></el-table-column>
      <el-table-column prop="industry" :label="$t('lan.industry')" align="center" width="200" show-overflow-tooltip></el-table-column>
      <el-table-column prop="uiFlag" :label="$t('lan.customUI')" align="center" width="170">
        <template slot-scope="scope">
          <span>{{scope.row.uiFlag ==='1'?$t('lan.yes'):$t('lan.no')}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="logoFlag" :label="$t('lan.addLogo')" align="center" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.logoFlag ==='1'?$t('lan.yes'):$t('lan.no')}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="content" :label="$t('lan.other')" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.content = scope.row.content.substring(0,20)}}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('lan.operation')" align="center" min-width="160">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="queryDetail(scope.row)">{{$t('lan.see')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页开始 -->
    <pagination :total="total" :pageData="data" @hanleSize="changePage" @hanlePage="handleSizeChange"></pagination>

    <!-- 查看详情 -->
    <el-dialog :title="$t('lan.viewDetail')" :visible.sync="openModal" width="700px" top="5vh">
      <div style="padding:10px;">
        <el-form label-width="80px" :model="detail">
          <div class="title">{{$t('lan.personalInformation')}}</div>
          <el-row>
            <el-col :span="11">
              <el-form-item :label="$t('lan.name')">
                <el-input disabled v-model="detail.name" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item :label="$t('lan.phone')">
                <el-input disabled v-model="detail.mobile" size="small"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item :label="$t('lan.industry')">
                <el-input disabled v-model="detail.industry" size="small"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="title">{{$t('lan.customRequirements')}}</div>
          <el-row>
            <el-form-item :label="$t('lan.isSoftware')" label-width="300px">
              <el-radio-group v-model="detail.uiFlag" disabled>
                <el-radio label="1">{{$t('lan.yes')}}</el-radio>
                <el-radio label="2">{{$t('lan.no')}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item :label="$t('lan.isLogo')" label-width="300px">
              <el-radio-group v-model="detail.logoFlag" disabled>
                <el-radio label="1">{{$t('lan.yes')}}</el-radio>
                <el-radio label="2">{{$t('lan.no')}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item :label="$t('lan.other')">
                <el-input type="textarea" disabled :rows="6" v-model="detail.content"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="openModal = false">{{$t('lan.close')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      customizeList: [],
      data: {
        pageSize: 10,
        currentPage: 1,
        mobile: "",
        name: "",
        startTime: '',
        endTime: '',
      },
      detail: {},
      openModal: false,
      total: 0,
      loading: false,
      getTime: "",
      list: [],
    };
  },
  methods: {
    queryDetail (row) {
      this.list.map((item) => {
        if (item.id === row.id) this.detail = item
      })
      this.openModal = true
    },
    //点击页数触发
    changePage (page) {
      this.data.currentPage = page;
      this.getOrderList();
    },
    //选择页数最多显示几条数据
    handleSizeChange (val) {
      this.data.pageSize = val;
      this.getOrderList();
    },
    //查询关键字
    search () {
      this.data.currentPage = 1;
      this.getOrderList();
    },
    //重置列表
    reset () {
      this.data.pageSize = 10
      this.data.currentPage = 1
      this.data.name = ''
      this.data.mobile = ''
      this.data.startTime = ''
      this.data.endTime = ''
      this.getOrderList();
    },
    //获取列表
    async getOrderList () {
      this.loading = true;
      let url = "/customize/queryPage";
      let result = await this.request.httpRequest("POST", url, this.data);
      if (result.code == 200) {
        this.total = result.data.totalRows;
        this.list = JSON.parse(JSON.stringify(result.data.datas))
        this.customizeList = result.data.datas;
      } else {
        this.$message({ type: "error", message: result.msg });
      }
      this.loading = false;
    }
  },
  mounted () {
    this.getOrderList();
    this.getTime = this.helper.debounce(this.getOrderList); //防抖
  },
  created () {
    document.onkeydown = e => {
      if (e.keyCode == 13) {
        this.search();
      }
    };
  }
};
</script>
<style scoped>
.el-form {
  padding: 15px 0px !important;
}
.demo-form-inline >>> .el-form-item {
  margin-bottom: 0px !important;
}
.title {
  margin: 0px 20px 20px;
  padding-bottom: 15px;
  padding-left: 5px;
  text-align: left;
  box-sizing: border-box;
  font-size: 18px;
  font-weight: 700;
  border-bottom: 2px solid #555;
}
</style>